<template>
  <el-card>
    <el-table
      ref="tableList"
      :data="allList"
      style="width: 100%"
      border
      :row-key="(row:any) => row.id"
      :expand-row-keys="expandRowKeys"
      @row-click="rowClick"
    >
      <el-table-column
        prop="name"
        label="名称"
        min-width="250"
      ></el-table-column>
      <el-table-column prop="code" label="权限值" min-width="250" />
      <el-table-column prop="updateTime" label="修改时间" min-width="250" />
      <el-table-column prop="address" label="操作" min-width="260">
        <template #default="{ row }">
          <el-button
            :disabled="row.level == 4 ? true : false"
            @click="addPar(row)"
          >
            {{ row.level == 3 ? '添加功能' : '添加菜单' }}
          </el-button>
          <el-button
            :disabled="row.level == 1 ? true : false"
            @click="updatePer(row)"
          >
            编辑
          </el-button>
          <el-popconfirm title="是否删除?" @confirm="delPer(row)">
            <template #reference>
              <el-button :disabled="row.level == 1 ? true : false">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-dialog v-model="dialogVisible" title="菜单管理" width="700">
    <el-form :model="menuData">
      <el-form-item label="名称">
        <el-input placeholder="请输入名称" v-model="menuData.name"></el-input>
      </el-form-item>
      <el-form-item label="权限">
        <el-input placeholder="请输入权限" v-model="menuData.code"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button @click="save">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reqAll, reqAddPer, reqDel } from '@/api/acl/menu/index'
import type {
  dataList,
  Data,
  codeNull,
  menuDataInterface,
} from '@/api/acl/menu/type'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
const tableList = ref<any>()
const expandRowKeys = ref<any>([])
// const tableRowKey = ref<string>('id')
// 存储数据
const allList = ref<Data[]>([])
// dialog
const dialogVisible = ref<boolean>(false)
// 携带的参数对象
const menuData = reactive<menuDataInterface>({
  code: '',
  level: 0,
  name: '',
  pid: 0,
})
// 获取初始数据
const list = async () => {
  let res: dataList = await reqAll()
  if (res.code == 200) {
    allList.value = res.data
  }
}
onMounted(() => {
  list()
})
//表格点击
const rowClick = (row: any) => {
  tableList.value.toggleRowExpansion(row)
}
// 添加
const addPar = (val: Data) => {
  dialogVisible.value = true
  Object.assign(menuData, {
    id: 0,
    code: '',
    level: 0,
    name: '',
    pid: 0,
  })
  menuData.level = val.level + 1
  menuData.pid = val.id as number
}
//编辑
const updatePer = (val: Data) => {
  dialogVisible.value = true
  Object.assign(menuData, JSON.parse(JSON.stringify(val)))
}
const save = async () => {
  let res: codeNull = await reqAddPer(menuData)
  if (res.code == 200) {
    dialogVisible.value = false
    list()
    ElMessage.success(menuData.id ? '修改成功' : '添加成功')
  } else {
    ElMessage.error(res.data ? res.data : '失败')
  }
}
const delPer = async (val: Data) => {
  let res: codeNull = await reqDel(val.id)
  if (res.code == 200) {
    list()
    ElMessage.success('删除成功')
  } else {
    ElMessage.error(res.data ? res.data : '删除失败')
  }
}
</script>
<style lang="scss" scoped>
:deep(.cell) {
  cursor: pointer !important;
}
</style>
